<template>
  <el-dialog v-model="props.addDialog" title="新增点检项目" width="40%" :show-close="false" :destroy-on-close="true">
    <el-form :model="form" ref="formRef">
      <el-form-item label="设备类型" prop="deviceType" :rules="{
        required: true,
        message: '请选择设备类型',
        trigger: 'change'
      }">
        <el-cascader ref="deviceRef" style="width: 240px" v-model="form.deviceType" :show-all-levels="false"
          :options="deviceTypes" :props="cascaderProps" @change="deviceChange" filterable placeholder="可输入设备类型名称搜索" />
      </el-form-item>
      <el-form-item v-for="(item, index) in form.deviceItems">
        <div style="display: flex; width: 100%">
          <el-form-item label="点检项目" style="width: 50%; margin-right: 15px" :prop="`deviceItems[${index}].itemName`"
            :rules="{
              required: true,
              message: '请输入项目名称',
              trigger: 'blur'
            }">
            <!-- <el-input v-model="item.itemName" maxlength="128" show-word-limit type="textarea" placeholder="请输入点检项目名称" /> -->
            <el-input v-model="item.itemName" type="textarea" placeholder="请输入点检项目名称" maxlength="128" show-word-limit
              style="width: 100%" :rows="4" />
          </el-form-item>
          <el-form-item label="点检指标" style="margin-right: 15px; width: 50%" :prop="`deviceItems[${index}].content`"
            :rules="{
              required: true,
              message: '请输入点检指标',
              trigger: 'blur'
            }">
            <!-- <el-input v-model="item.content" maxlength="200" show-word-limit type="textarea" placeholder="请输入点检指标" /> -->
            <el-input v-model="item.content" type="textarea" placeholder="请输入点检指标" maxlength="200" show-word-limit
              style="width: 100%" :rows="4" />
          </el-form-item>
          <div class="addList" style="width: 6%" v-if="form.deviceItems.length > 1">
            <svg @click="delItem(item)" style="cursor: pointer" t="1677136520546" class="icon" viewBox="0 0 1024 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3250" width="20" height="32">
              <path
                d="M832 977.066667h8.533333s4.266667 0 8.533334-4.266667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666l4.266666-4.266667 4.266667-4.266667c0-4.266667 0-4.266667 4.266667-8.533333s0-4.266667 0-8.533333V213.333333v-8.533333s0-4.266667-4.266667-8.533333c0-4.266667 0-4.266667-4.266667-8.533334 0-4.266667-4.266667-4.266667-4.266666-4.266666-4.266667 0-4.266667-4.266667-4.266667-4.266667s-4.266667-4.266667-8.533333-4.266667H183.466667h-8.533334c0 4.266667 0 4.266667-4.266666 8.533334-4.266667 0-4.266667 4.266667-4.266667 4.266666l-4.266667 4.266667s-4.266667 4.266667-4.266666 8.533333V960l4.266666 4.266667c0 4.266667 4.266667 4.266667 4.266667 4.266666l4.266667 4.266667s4.266667 4.266667 8.533333 4.266667 4.266667 0 8.533333 4.266666h644.266667zM230.4 900.266667V251.733333h563.2v648.533334H230.4z"
                fill="#FA4016" p-id="3251"></path>
              <path
                d="M388.266667 704v17.066667c0 4.266667 4.266667 4.266667 4.266666 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266667 4.266666 4.266667 0 4.266667 4.266667 8.533333 4.266667 0 0 4.266667 0 8.533333 4.266667h17.066667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667 0 8.533334-4.266667 4.266667 0 4.266667-4.266667 4.266666-4.266666l4.266667-4.266667c0-4.266667 4.266667-4.266667 4.266667-8.533333v-8.533334V426.666667v-8.533334-8.533333c0-4.266667-4.266667-4.266667-4.266667-8.533333l-4.266667-4.266667c-4.266667 0-4.266667-4.266667-4.266666-4.266667s-4.266667-4.266667-8.533334-4.266666h-34.133333c-4.266667 0-4.266667 4.266667-8.533333 4.266666l-4.266667 4.266667c0 4.266667-4.266667 4.266667-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666 8.533333v294.4zM631.466667 721.066667v-8.533334V426.666667v-8.533334-8.533333c0-4.266667-4.266667-4.266667-4.266667-8.533333l-4.266667-4.266667c-4.266667 0-4.266667-4.266667-4.266666-4.266667s-4.266667-4.266667-8.533334-4.266666h-8.533333-21.333333c-4.266667 0-4.266667 4.266667-8.533334 4.266666l-4.266666 4.266667c0 4.266667-4.266667 4.266667-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266667 8.533333V721.066667c0 4.266667 4.266667 4.266667 4.266667 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266666 4.266666 4.266667 0 4.266667 4.266667 8.533334 4.266667 0 0 4.266667 0 8.533333 4.266667h17.066667c4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667 0 8.533333-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266666l4.266667-4.266667v-8.533333zM46.933333 221.866667v8.533333c0 4.266667 0 4.266667 4.266667 8.533333l4.266667 4.266667c4.266667 0 4.266667 4.266667 4.266666 4.266667s4.266667 4.266667 8.533334 4.266666 4.266667 0 8.533333 4.266667h870.4c4.266667 0 4.266667 0 8.533333-4.266667l4.266667-4.266666c4.266667 0 4.266667-4.266667 4.266667-4.266667l4.266666-4.266667c0-4.266667 4.266667-4.266667 4.266667-8.533333s0-4.266667 4.266667-8.533333V213.333333v-8.533333s0-4.266667-4.266667-8.533333c0-4.266667 0-4.266667-4.266667-8.533334 0-4.266667-4.266667-4.266667-4.266666-4.266666l-4.266667-4.266667-4.266667-4.266667H68.266667c-4.266667 0-4.266667 4.266667-8.533334 4.266667s0 4.266667 0 8.533333l-4.266666 4.266667s-4.266667 4.266667-4.266667 8.533333v17.066667c-4.266667 0-4.266667 0-4.266667 4.266667z"
                fill="#FA4016" p-id="3252"></path>
              <path
                d="M384 59.733333c-4.266667 0-4.266667 4.266667-8.533333 8.533334l-68.266667 128s-4.266667 4.266667-4.266667 8.533333v21.333333c0 4.266667 0 4.266667 4.266667 8.533334l4.266667 4.266666c0 4.266667 4.266667 4.266667 4.266666 4.266667l4.266667 4.266667c4.266667 4.266667 12.8 4.266667 17.066667 4.266666h349.866666c4.266667 0 4.266667 0 8.533334-4.266666 4.266667 0 4.266667-4.266667 4.266666-4.266667 4.266667 0 4.266667-4.266667 4.266667-4.266667 0-4.266667 4.266667-4.266667 4.266667-4.266666 0-4.266667 4.266667-4.266667 4.266666-8.533334 0 0 0-4.266667 4.266667-8.533333v-8.533333c0-8.533333 0-12.8-4.266667-17.066667l-68.266666-128c0-4.266667-4.266667-4.266667-4.266667-8.533333l-8.533333-8.533334c-4.266667 0-4.266667-4.266667-8.533334-4.266666h-213.333333c0 4.266667-4.266667 4.266667-8.533333 4.266666s-8.533333 0-8.533334 4.266667c-4.266667 4.266667-8.533333 4.266667-8.533333 8.533333z m51.2 64h157.866667l25.6 51.2h-213.333334l29.866667-51.2z"
                fill="#FA4016" p-id="3253"></path>
            </svg>
          </div>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="addItem()" type="primary">添加点检项目及内容</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(formRef)">取消</el-button>
        <el-button type="primary" @click="submit(formRef)" :loading="loading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance } from 'element-plus'
import { ref, reactive } from 'vue'
import { saveDeviceItemApi } from '/@/api/check'
import { dictionaryList } from '/@/api/publicApi'
const props = defineProps({
  addDialog: Boolean
})
const cascaderProps = {
  expandTrigger: 'click' as const,
  value: 'id',
  label: 'configValue',
  emitPath: false,
  checkStrictly: true
}
const emit = defineEmits(['addCancel', 'addSubmit'])
const formRef = ref<FormInstance>()
const deviceRef = ref()
const loading = ref(false)
const formLabelWidth = ref('100px')
const form = ref({
  itemType: 2,
  deviceType: '',
  deviceTypeName: '',
  deviceItems: [
    {
      itemName: '',
      content: ''
    }
  ]
})

const deviceTypes = ref([])

const getDeviceType = () => {
  dictionaryList({ configType: 'device_type', keyword: '' }).then((res) => {
    if (res.code == 0) {
      deviceTypes.value = res.data
    }
  })
}
getDeviceType()

const deviceChange = () => {
  let obj = deviceRef.value.getCheckedNodes()
  form.value.deviceTypeName = obj[0].label
}

const delItem = (item: any) => {
  var index = form.value.deviceItems.indexOf(item)
  if (index !== -1) {
    form.value.deviceItems.splice(index, 1)
  }
}

const addItem = () => {
  form.value.deviceItems.push({
    itemName: '',
    content: ''
  })
}

const submit = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      saveDeviceItemApi(form.value).then((res) => {
        if (res.code == 0) {
          ElMessage.success('新增成功')
          loading.value = false
          formEl.resetFields()
          form.value.deviceItems = [
            {
              itemName: '',
              content: ''
            }
          ]
          emit('addSubmit')
        } else {
          loading.value = false
        }
      })
    } else {
      loading.value = false
    }
  })
}

const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  form.value.deviceItems = [
    {
      itemName: '',
      content: ''
    }
  ]
  emit('addCancel')
}
</script>
<style scoped lang="scss"></style>
